<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台管理 - 慰风博客</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@6.5.95/css/materialdesignicons.min.css">
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #f5f7fa;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        }
        .admin-container {
            display: flex;
            min-height: 100vh;
        }
        .sidebar {
            width: 200px;
            background-color: #304156;
            color: #fff;
            padding: 20px 0;
        }
        .sidebar-header {
            padding: 0 20px;
            margin-bottom: 20px;
        }
        .sidebar-menu {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .sidebar-menu li {
            padding: 12px 20px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .sidebar-menu li:hover {
            background-color: #263445;
        }
        .sidebar-menu li.active {
            background-color: #1890ff;
        }
        .main-content {
            flex: 1;
            padding: 20px;
        }
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        .article-list {
            background: #fff;
            padding: 20px;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
        .article-editor {
            background: #fff;
            padding: 20px;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
        .editor-toolbar {
            margin-bottom: 20px;
        }
        .editor-content {
            margin-bottom: 20px;
        }
        .editor-footer {
            text-align: right;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="admin-container">
            <div class="sidebar">
                <div class="sidebar-header">
                    <h2>慰风博客</h2>
                </div>
                <ul class="sidebar-menu">
                    <li :class="{ active: currentView === 'list' }" @click="currentView = 'list'">
                        <i class="el-icon-document"></i> 文章列表
                    </li>
                    <li :class="{ active: currentView === 'editor' }" @click="currentView = 'editor'">
                        <i class="el-icon-edit"></i> 写文章
                    </li>
                </ul>
            </div>
            <div class="main-content">
                <div class="header">
                    <h2>{{ currentView === 'list' ? '文章列表' : '写文章' }}</h2>
                    <div>
                        <span v-if="currentUser" style="margin-right: 20px;">欢迎，{{ currentUser.username }}</span>
                        <el-button type="text" @click="logout">退出</el-button>
                    </div>
                </div>

                <!-- 文章列表 -->
                <div v-if="currentView === 'list'" class="article-list">
                    <el-table :data="articles" style="width: 100%">
                        <el-table-column prop="title" label="标题"></el-table-column>
                        <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
                        <el-table-column label="操作" width="200">
                            <template slot-scope="scope">
                                <el-button size="mini" @click="editArticle(scope.row)">编辑</el-button>
                                <el-button size="mini" type="danger" @click="deleteArticle(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

                <!-- 文章编辑器 -->
                <div v-if="currentView === 'editor'" class="article-editor">
                    <el-form :model="article" :rules="rules" ref="articleForm" label-width="80px">
                        <el-form-item label="标题" prop="title">
                            <el-input v-model="article.title"></el-input>
                        </el-form-item>
                        <el-form-item label="分类" prop="categoryId">
                            <el-select v-model="article.categoryId" placeholder="请选择分类">
                                <el-option
                                    v-for="item in categories"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="标签" prop="tagIds">
                            <el-select v-model="article.tagIds" multiple placeholder="请选择标签">
                                <el-option
                                    v-for="item in tags"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="内容" prop="content">
                            <el-input type="textarea" v-model="article.content" :rows="15"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="saveArticle">保存</el-button>
                            <el-button @click="resetForm">重置</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    currentView: 'list',
                    articles: [],
                    categories: [],
                    tags: [],
                    article: {
                        id: null,
                        title: '',
                        content: '',
                        categoryId: null,
                        tagIds: []
                    },
                    currentUser: null,
                    isAdmin: false,
                    rules: {
                        title: [
                            { required: true, message: '请输入标题', trigger: 'blur' }
                        ],
                        categoryId: [
                            { required: true, message: '请选择分类', trigger: 'change' }
                        ],
                        content: [
                            { required: true, message: '请输入内容', trigger: 'blur' }
                        ]
                    }
                }
            },
            created() {
                this.checkLogin();
            },
            methods: {
                async checkLogin() {
                    try {
                        const res = await axios.get('/api/users/current');
                        if (res.data.code === 200) {
                            const data = res.data.data;
                            this.currentUser = data;
                            this.isAdmin = data.roles && data.roles.some(role => role.code === 'ADMIN');
                            if (!this.isAdmin) {
                                this.$message.error('没有访问权限');
                                setTimeout(() => {
                                    window.location.href = '/';
                                }, 1500);
                                return;
                            }
                            this.fetchArticles();
                            this.fetchCategories();
                            this.fetchTags();
                        } else {
                            this.$message.error('登录已过期，请重新登录');
                            setTimeout(() => {
                                window.location.href = '/login.html';
                            }, 1500);
                        }
                    } catch (error) {
                        this.$message.error('登录已过期，请重新登录');
                        setTimeout(() => {
                            window.location.href = '/login.html';
                        }, 1500);
                    }
                },
                fetchArticles() {
                    axios.get('/api/articles/list').then(response => {
                        if (response.data.code === 200) {
                            this.articles = response.data.data.records;
                        }
                    });
                },
                fetchCategories() {
                    axios.get('/api/categories/list').then(response => {
                        if (response.data.code === 200) {
                            this.categories = response.data.data.records;
                        }
                    });
                },
                fetchTags() {
                    axios.get('/api/tags/list').then(response => {
                        if (response.data.code === 200) {
                            this.tags = response.data.data.records;
                        }
                    });
                },
                editArticle(article) {
                    this.currentView = 'editor';
                    this.article = {
                        id: article.id,
                        title: article.title,
                        content: article.content,
                        categoryId: article.categoryId,
                        tagIds: article.tags ? article.tags.map(tag => tag.id) : []
                    };
                },
                deleteArticle(article) {
                    this.$confirm('确认删除该文章吗？', '提示', {
                        type: 'warning'
                    }).then(() => {
                        axios.delete(`/api/articles/${article.id}`).then(response => {
                            if (response.data.code === 200) {
                                this.$message.success('删除成功');
                                this.fetchArticles();
                            } else {
                                this.$message.error(response.data.msg || '删除失败');
                            }
                        });
                    });
                },
                saveArticle() {
                    this.$refs.articleForm.validate(valid => {
                        if (valid) {
                            const articleData = {
                                id: this.article.id,
                                title: this.article.title,
                                content: this.article.content,
                                categoryId: this.article.categoryId
                            };
                            const request = this.article.id
                                ? axios.put(`/api/articles/${this.article.id}`, articleData, {
                                    params: { tagIds: this.article.tagIds },
                                    paramsSerializer: params => {
                                        return Object.entries(params)
                                            .map(([key, value]) => {
                                                if (Array.isArray(value)) {
                                                    return value.map(v => `${key}=${v}`).join('&');
                                                }
                                                return `${key}=${value}`;
                                            })
                                            .join('&');
                                    }
                                })
                                : axios.post('/api/articles', articleData, {
                                    params: { tagIds: this.article.tagIds },
                                    paramsSerializer: params => {
                                        return Object.entries(params)
                                            .map(([key, value]) => {
                                                if (Array.isArray(value)) {
                                                    return value.map(v => `${key}=${v}`).join('&');
                                                }
                                                return `${key}=${value}`;
                                            })
                                            .join('&');
                                    }
                                });
                            request.then(response => {
                                if (response.data.code === 200) {
                                    this.$message.success('保存成功');
                                    this.currentView = 'list';
                                    this.fetchArticles();
                                    this.resetForm();
                                } else {
                                    this.$message.error(response.data.msg || '保存失败');
                                }
                            });
                        }
                    });
                },
                resetForm() {
                    this.article = {
                        id: null,
                        title: '',
                        content: '',
                        categoryId: null,
                        tagIds: []
                    };
                    if (this.$refs.articleForm) {
                        this.$refs.articleForm.resetFields();
                    }
                },
                logout() {
                    axios.post('/api/user/logout')
                        .then(() => {
                            this.$message.success('退出成功');
                            setTimeout(() => {
                                window.location.href = '/login.html';
                            }, 1500);
                        })
                        .catch(() => {
                            this.$message.error('退出失败');
                        });
                }
            }
        });
    </script>
</body>
</html> 